<template>
  <span ref="filter_value_panel" :class="[
    'filter-value-panel',
    !!this.FilterIsClassic ? 'filter-value-panel-classic' : '',
  ]" @mouseover="filterValueMouseEnter" @mouseout="filterValueMouseLeave" tabIndex="-1">
    <input ref="filterValueInput" autocomplete="off" :id="'filterValue_' + Filter.ID" type="text"  v-show="ParaContrl != 'numberrange'"
      v-autowidth="{
        maxWidth: !!FilterIsClassic ? '100%' : '300px',
        minWidth: !!FilterIsClassic ? '100%' : '30px',
        comfortZone: '1px',
      }" :class="[
        'filter-value',
        !!FilterIsClassic ? 'filter-value-input-classic' : '',
      ]" :style="filterValueInputStyle" :title="!!FilterIsClassic ? formatDataByLang : ''"
      :placeholder="!!FilterIsClassic ?Filter.placeholder|| getPlaceholder() : ''" :value="formatDataByLang" @input="inputChange"
      @click.stop.prevent="filterValueClick" @blur="filterValueBlur" @keydown="filterValueKeyDown" @keyup.enter="filterValueClick"
      @keyup.delete="handleDeleteInput" @focus="InputIsFocused = true" :readonly="IsReadOnly" :disabled="Filter.IsOff"
      :tabIndex="tabIndex" />

    <!-- 字段比较 -->
    <span v-if="IsFieldRela" style="position: absolute; top: 100%; left: 0; right: 0; border: none">
      <div></div>

      <!-- 筛选名称下拉选择框 -->
      <t-menu transition-show="jump-down" transition-hide="jump-up" fit :offset="FilterIsClassic ? [0, 1] : [0, 5]"
        v-model="visibleFilterNameMenu">
        <div class="tr-filter-menu">
          <!-- 筛选字段搜索 -->
          <div class="filter-name-text-panel" v-if="!isMobile">
            <span class="filter-name-search-panel">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="svg-icon">
                <path
                  d="M12.57.06A12.57,12.57,0,1,0,25.14,12.63,12.57,12.57,0,0,0,12.57.06Zm0,22.64A10.07,10.07,0,1,1,22.64,12.62h0A10.08,10.08,0,0,1,12.57,22.7ZM31.15,27l-4.59-4.58a2.91,2.91,0,0,0-4.12,4.11L27,31.09A2.91,2.91,0,1,0,31.15,27Z"
                  transform="translate(0 -0.06)"></path>
              </svg>
            </span>
            <input class="filter-name-text" autocomplete="off" ref="fieldSearchInput" :style="{
              width: FilterIsClassic ? panelWidth - 50 + 'px' : '126px',
            }" type="text" v-model="searchText" :placeholder="Term.placeHolder.placeholder_searchText"
              @click="searchTextClick" @blur="searchTextBlur" @keydown="filterValueKeyDown"
              @keyup.down="$refs.fieldDownList.focusAndActive" :tabIndex="tabIndex" />
          </div>

          <!-- 字段搜索内容 -->
          <q-scroll-area :style="{ height: scrollHeight + 'px' }">
            <c-down-list ref="fieldDownList" FieldKey="fieldName" :List="activeItemList" :CurrentIndex="activeItemList.findIndex(v => v.fieldName == Filter.Value)
              " @select="filterNameCommand" :mountedToFocus="false" :tabIndex="tabIndex">
            </c-down-list>
          </q-scroll-area>
          <div style="
              min-width: 100px;
              max-width: 100%;
              height: 0px;
              overflow: hidden;
              visibility: hidden;
              padding-right: 60px;
            ">
            <div v-for="{ fieldName } in activeItemList">{{ fieldName }}</div>
          </div>
          <!-- 字段搜索为空提示 -->
          <div v-if="activeItemList.length == 0" class="filter-name-empty-panel">
            <span class="filter-name-empty">{{ Term.placeHolder.noData }}</span>
          </div>
        </div>
      </t-menu>
    </span>

    <!-- sinput -->
    <span v-show="ParaContrl == 'sinput'" style="position: absolute; top: 100%; left: 0; right: 0; border: none">
      <div></div>

      <t-menu transition-show="jump-down" transition-hide="jump-up" anchor="bottom middle" self="top middle" fit
        :offset="FilterIsClassic ? [0, 1] : [0, 5]" v-model="visibleSinputMenu">
        <div class="tr-filter-menu">
          <div style="width: 120px; max-width: 100%; height: 0"></div>

          <q-scroll-area ref="FieldsScroll" :style="{ height: Math.min(12, SinputList.length) * 33 + 'px' }">
            <c-down-list ref="fieldDownList" :List="SinputList"
              :CurrentIndex="SinputList.findIndex(v => v === filterValue)" @select="filterSinputCommand">
            </c-down-list>
          </q-scroll-area>
          <div style="
              min-width: 100px;
              max-width: 100%;
              height: 0px;
              overflow: hidden;
              visibility: hidden;
              padding-right: 60px;
            ">
            <div v-for="Name in SinputList">{{ Name }}</div>
          </div>
        </div>
      </t-menu>
    </span>

    <!-- 下拉选择 -->
    <span v-if="ParaContrl == 'down'" style="position: absolute; top: 100%; left: 0; right: 0; border: none">
      <div></div>

      <t-menu transition-show="jump-down" transition-hide="jump-up" anchor="bottom middle" self="top middle"
        :target="true" :context-menu="true" fit :offset="FilterIsClassic ? [0, 1] : [0, 5]" v-model="visibleDownMenu">
        <div class="tr-filter-menu">
          <div style="width: 150px; max-width: 100%; height: 0"></div>

          <q-scroll-area style="width: 100%" :style="{ height: downHeight + 'px' }">
            <c-down-list ref="downSelectList" FieldKey="fieldName" :List="downList" :CurrentIndex="downList
                .map((v, index) => ({ ...v, index }))
                .filter(v => downValue.includes(v.code))
                .map(({ index }) => index)
              " @select="handlerClickDownItem">
              <template #item="{ item, index,showIcon }">
                <div class="filter-down-item">
                  <span class="f-toe" style="max-width: 85%" :title="item.name">{{ item.name }}</span>
                  <t-icon v-if="downMultiple&&downValue.includes(item.code)" class="filter-down-item-icon" name="done"></t-icon>
                </div>
              </template>
            </c-down-list>
          </q-scroll-area>

          <div style="
              min-width: 100px;
              max-width: 100%;
              height: 0px;
              overflow: hidden;
              visibility: hidden;
              padding-right: 90px;
            ">
            <div v-for="{ name } in downList">{{ name }}</div>
          </div>
        </div>
      </t-menu>
    </span>

    <!-- 日期 -->
    <span style="
        position: absolute;
        top: 28px;
        right: 0px;
        width: 1px;
        height: 1px;
        transform: translateX(-50%);
        visibility: hidden;
      " :style="{ top: FilterIsClassic ? '28px' : '0' }" v-show="ParaContrl == 'date'">
      <span v-if="ParaContrl == 'date' && datePickerVisible">
        <t-date-time-picker ref="datePicker" :displayFormatWithDateTime="'YYYY/MM/DD'"
          :valueFormat="isShortCuts ? '' : 'YYYY/MM/DD'" :modelValue="pickerValue"
          @update:modelValue="v => pickerValueChange(v)" dateType="date" :todayBtn="true" :nowBtn="true"
          :placeholder="!!FilterIsClassic ?Filter.placeholder|| getPlaceholder() : ''" 
          :format24h="true" :clearable="true"
          :elDatePickerOptions="{ shortcuts: pickerOptions.shortcuts }"></t-date-time-picker>

        <!-- <span></span> -->

        <!-- <t-menu
          transition-show="jump-down"
          transition-hide="jump-up"
          anchor="bottom middle"
          self="top middle"
          v-model="datePickerVisible"
        >
          <div style="width: 120px; max-width: 100%; height: 6px"></div>

          <t-date
            mask="YYYY/MM/DD"
            :modelValue="pickerValue"
            @update:modelValue="v => pickerValueChange(v)"
          />

          <div style="width: 120px; max-width: 100%; height: 6px"></div>
        </t-menu> -->
      </span>
    </span>

    <!-- 日期范围 -->
    <span style="
        position: absolute;
        top: 28px;
        right: 0px;
        width: 1px;
        height: 1px;
        transform: translateX(-50%);
        visibility: hidden;
      " v-show="ParaContrl == 'daterange'">
      <span v-if="ParaContrl == 'daterange' && datePickerVisible">
        <t-date-time-picker ref="datePicker" :displayFormatWithDateTime="'YYYY/MM/DD'"
        :placeholder="!!FilterIsClassic ?Filter.placeholder|| getPlaceholder() : ''" 
        :valueFormat="isShortCuts ? '' : 'YYYY/MM/DD'" :modelValue="quasarDateRange"
          @update:modelValue="v => pickerValueChange(v)" dateType="daterange" :todayBtn="true" :nowBtn="true"
          :range="true" :format24h="true" :clearable="true" :elDatePickerOptions="{ shortcuts: pickerRangeOptions.shortcuts_date }"
          ></t-date-time-picker>
        <!-- <t-menu
          transition-show="jump-down"
          transition-hide="jump-up"
          anchor="bottom middle"
          self="top left"
          :offset="FilterIsClassic ? [0, 0] : [0, 5]"
          v-model="datePickerVisible"
        >
          <div style="width: 120px; max-width: 100%; height: 0"></div>

          <t-date-time-picker
            mask="YYYY/MM/DD"
            :modelValue="quasarDateRange"
            type="date"
            @update:modelValue="
              v => {
                pickerRangeValueChange(v);
              }
            "
            :range="true"
          :elDatePickerOptions="{shortcuts:pickerOptions.shortcuts}"
          />

          <div style="width: 120px; max-width: 100%; height: 0"></div>
        </t-menu> -->
      </span>
    </span>

    <!-- 日期时间 -->
    <span style="
        position: absolute;
        top: 28px;
        right: 0px;
        width: 1px;
        height: 1px;
        transform: translateX(-50%);
        visibility: hidden;
      " :style="{ top: FilterIsClassic ? '28px' : '0' }" v-show="ParaContrl == 'datetime'">
      <span v-if="ParaContrl == 'datetime' && datePickerVisible">
        <t-date-time-picker ref="dateTimePicker" :hideLabel="true"
          :displayFormatWithDateTime="'YYYY/MM/DD HH:mm:ss'"
          :valueFormat="isShortCuts ? '' : 'YYYY/MM/DD HH:mm:ss'" :modelValue="pickerValue"
          @update:modelValue="v => pickerValueChange(v)" dateType="datetime" :todayBtn="true" :nowBtn="true"
          :format24h="true" :clearable="true"
          :elDatePickerOptions="{ shortcuts: pickerOptions.shortcuts }"></t-date-time-picker>
      </span>
    </span>

    <!-- 日期时间范围 -->
    <span style="
        position: absolute;
        top: 100%;
        left: 0%;
        transform: translateX(-50%);
        border: none;
      " v-show="ParaContrl == 'datetimerange'">
      <span v-if="ParaContrl == 'datetimerange' && datePickerVisible">
        <span></span>
        <t-date-time-picker ref="dateTimePicker" :displayFormatWithDateTime="'YYYY/MM/DD HH:mm:ss'"
        :placeholder="!!FilterIsClassic ?Filter.placeholder|| getPlaceholder() : ''" 
        :valueFormat="isShortCuts ? '' : 'YYYY/MM/DD HH:mm:ss'" :modelValue="quasarDateRange"
          @update:modelValue="v => pickerValueChange(v)" dateType="datetimerange" :todayBtn="true" :nowBtn="true"
          :range="true" :format24h="true" :clearable="true"  :elDatePickerOptions="{ shortcuts: pickerRangeOptions.shortcuts }"
         ></t-date-time-picker>
        <!-- <t-menu
          transition-show="jump-down"
          transition-hide="jump-up"
          anchor="bottom middle"
          self="top left"
          :offset="FilterIsClassic ? [0, 0] : [0, 5]"
          v-model="datePickerVisible"
        >
          <div style="width: 120px; max-width: 100%; height: 0"></div>

          <t-date-time-picker
            mask="YYYY/MM/DD HH:mm:ss"
            :modelValue="quasarDateRange"
            type="datetime"
            @update:modelValue="
              v => {
                pickerRangeValueChange(v);
              }
            "
            :range="true"
          :elDatePickerOptions="{shortcuts:pickerOptions.shortcuts}"
          />

          <div style="width: 120px; max-width: 100%; height: 0"></div>
        </t-menu> -->
      </span>
    </span>

    <!-- 数字范围 -->
    <span v-if="ParaContrl == 'numberrange'" :class="[FilterIsClassic ? 'filter-item-value-numberrange' : '']">
      <NumberRange ref="filterValueNumberRange" :Filter="Filter"  :FilterValue.sync="filterValue" :FilterIsClassic="FilterIsClassic"
        :tabIndex="tabIndex">
      </NumberRange>
    </span>

    <!-- 下拉帮助 -->
    <div v-show="ParaContrl == 'help' && HelpEdit" ref="helpDiv" :class="[
      'filter-value-help-panel',
      !FilterIsClassic ? 'filter-value-help-panel-sc' : '',
    ]" :style="{ width: FilterIsClassic ? 'calc(100% - 20px)' : '100%' }" :id="'filterValueHelp_' + Filter.ID"  @keyup.enter.stop.prevent="()=>{}">
      <div class="filter-value-help-panel-wrap" :style="{
        width: FilterIsClassic ? 'calc(100% + 20px)' : 'calc(100% + 50px)',
      }" @click="downHelperClick">
        <down-helper :downMultiple="downMultiple" ref="downHelper" :Filter="Filter"  :Field="Field" @change="handleDownHelperChange"
          @hidePanel="handleHideHelpPanel" v-if="ParaContrl == 'help' && !!newHelpInstance"></down-helper>
      </div>
    </div>

    <!-- 下拉树帮助 -->
    <span v-show="ParaContrl == 'treehelp' && HelpEdit" ref="treehelpDiv" :class="[
      'filter-value-help-panel',
      !FilterIsClassic ? 'filter-value-help-panel-sc' : '',
    ]" :style="{ width: FilterIsClassic ? 'calc(100% - 20px)' : '100%' }" :id="'filterTreeHelp_' + Filter.ID">
      <div class="filter-value-help-panel-wrap" :style="{
        width: FilterIsClassic ? 'calc(100% + 20px)' : 'calc(100% + 50px)',
      }">
        <tree-helper ref="treeHelp" :Filter="Filter" :Field="Field" @change="handleTreeHelperChange"
          v-if="ParaContrl == 'treehelp' && !!newHelpInstance"></tree-helper>
      </div>
    </span>
    <!-- 清空按钮 -->
    <span v-if="FilterIsClassic" v-show="clearBtnIsShowed||(datePickerVisible&&Filter.Value)" :class="[
      'filter-value-clear',
      ParaContrl == 'text' || ParaContrl == 'numberrange' || !ParaContrl
        ? 'filter-value-clear-text'
        : '',
    ]" :tabindex="tabIndex" @click="clearFilterValue" @keyup.enter="clearFilterValue"
      @focus="clearBtnIsFocused = true" @blur="clearBtnIsFocused = false" :title="Term.title.clearValue">
      <q-icon name="clear" size="14px"></q-icon>
    </span>
    <!-- 控制大小框 -->
    <span v-if="
      FilterIsClassic &&
      ParaContrl != 'text' &&
      ParaContrl != 'numberrange' &&
      ParaContrl
    " class="filter-value-icon" @click="valueIconClick" @keyup.enter="valueIconClick">
      <!-- <i :class="[this.getParaIcon()]"></i> -->
      <t-icon :size="getParaIconSize()" :name="getParaIcon()"></t-icon>
    </span>
  </span>
</template>

<script>
import _ from 'lodash';
import dayjs from 'dayjs';
import { useQuasar } from '@teld/q-components';

import VueInputAutowidth from './directive/auto-width';
import { Terms } from './config/resouce';
import { addStylesheetRules } from './utils/index';

import QScrollArea from '@teld/q-components/ScrollArea';
import QIcon from '@teld/q-components/Icon';

import TMenu from 't/basic/menu/Component';
import TDate from 't/basic/date/Component';
import TDateTime from 't/basic/date-time/Component';
import TIcon from 't/basic/icon/Component';
import TList from 't/basic/list';
import TItem from 't/basic/item';
// import TDateTimePicker from 't/basic/date-time-picker/Component';
import TDateTimePicker from 't/basic/date-time/Component';
import NumberRange from './cpts/NumberRange.vue';
import downHelper from './cpts/down-helper';
import treeHelper from './cpts/tree-helper';
import cDownList from './cpts/down-list';

const readCookie = window.readCookie || undefined;

String.prototype.toDate = function () {
  return this;
};
/**
 * 格式化时间
 *
 * 示例：
 * new Date(2012,1,1,10,9).format('yyyy-MM-dd hh:mm:ss)
 * out: 2012-01-01 10:09:00
 */
const dateFormat = function (dateObj, yyyyMMdd) {
  var month = dateObj.getMonth() + 1,
    date = dateObj.getDate(),
    hours = dateObj.getHours(),
    min = dateObj.getMinutes(),
    sec = dateObj.getSeconds();
  return yyyyMMdd
    .replace(/yyyy/g, dateObj.getFullYear())
    .replace(/yy/g, String(dateObj.getFullYear()).substr(2, 2))
    .replace(/MM/g, month >= 10 ? month : '0' + month)
    .replace(/M\*/g, month)
    .replace(/dd/g, date >= 10 ? date : '0' + date)
    .replace(/d\*/g, date)
    .replace(/hh/g, hours >= 10 ? hours : '0' + hours)
    .replace(/h\*/g, hours)
    .replace(/m\*/g, min)
    .replace(/mm/g, min >= 10 ? min : '0' + min)
    .replace(/ss/g, sec >= 10 ? sec : '0' + sec)
    .replace(/s\*/g, sec);
};

const Funcs = {
  Notify: () => { },
  Confirm: () => { },
  GetTerms: () => { },
  AtVarTransform: () => { },
  FasRequestTagAdd: () => { },
  DateTimeToString: () => { },
  DateToString: () => { },
  ...(window.Funcs || {}),
};

let DateTimeFormat_Date_Time = {
  format: v => {
    return dateFormat(new Date(v), 'yyyy/MM/dd hh:mm:ss');
  },
};
let DateTimeFormat_Date = {
  format: v => {
    return dateFormat(new Date(v), 'yyyy/MM/dd');
  },
};
//千分位
let group = ',';
//小数点
let decimal = '.';
if (window.readCookie && readCookie?.('teld_locale')) {
  const options_date_time = {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
  };
  DateTimeFormat_Date_Time.format = Funcs.DateTimeToString;
  DateTimeFormat_Date.format = Funcs.DateToString;
  //千分位
  group = new Intl.NumberFormat(readCookie?.('teld_locale'))
    .format(1111)
    .replace(/1/g, '');
  //小数点
  decimal = new Intl.NumberFormat(readCookie?.('teld_locale'))
    .format(1.1)
    .replace(/1/g, '');
}
let _this;
export default {
  name: 'FilterVaue',
  directives: { autowidth: VueInputAutowidth },
  components: {
    NumberRange,
    downHelper,
    treeHelper,
    cDownList,

    QScrollArea,
    QIcon,

    TMenu,
    TDate,
    TDateTime,
    TIcon,
    TList,
    TItem,
    TDateTimePicker,
  },
  props: ['Filter', 'Fields', 'Mappings', 'FilterIsClassic', 'tabIndex'],
  data() {
    const _this = this;
    return {
      Term: Terms,
      //数据内容
      filterValue: this.Filter.Value,
      //隶属的Filter
      belongFilter: this.Filter,
      //失去焦点计时器
      timeoutBlurValue: null,
      //原字段名称
      preFieldName: this.Filter.Value,
      //字段筛选
      searchText: '',
      //字段显示计时器
      timeoutActiveName: null,
      //新实例
      newHelpInstance: false,

      //下拉框下拉项
      downList: [],
      //下拉框选择值
      downValue: [],
      //下拉框是否多选
      downMultiple: false,

      DateTimeFormat_Date_Time,
      DateTimeFormat_Date,
      isShortCuts: false,
      fieldList: (() => {
        let _fields = _.cloneDeep(this.Fields);
        _fields.forEach(item => {
          //添加下拉项是否显示属性
          item['isActive'] = true;
        });

        return _fields;
      })(),
      pickerValue: (() => {
        let _value = this.Filter.Value;
        let _reg = /^[0-9,/:-\s]+$/;
        if (
          _value &&
          _value.replace &&
          !isNaN(Date.parse(new Date(_value.replace(/-/g, '/')))) &&
          isNaN(_value) &&
          _reg.test(_value)
        ) {
          return _value;
        } else {
          return '';
        }
      })(),
      pickerRangeValue: (() => {
        if (this.Filter.Value == null || !this.Filter.Value.split) {
          return '';
        }
        let _values = this.Filter.Value.split(' - ');
        let _allIsTime = true;

        let _reg = /^[0-9,/:-\s]+$/;
        _values.forEach(item => {
          if (
            isNaN(Date.parse(new Date(item.replace(/-/g, '/')))) ||
            !_reg.test(item)
          ) {
            _allIsTime = false;
          }
        });
        if (_allIsTime) {
          return this.Filter.Value;
        } else {
          return '';
        }
      })(),
      pickerOptions: {
        shortcuts: [
          {
            text: `@${Terms.date.today}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.today}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.today}-3`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.today}-3`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.today}-7`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.today}-7`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisMonday}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisMonday}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisSunday}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisSunday}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastMonday}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastMonday}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastSunday}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastSunday}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.beginningOfThisMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.beginningOfThisMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.endOfThisMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.endOfThisMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.beginningOfLastMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.beginningOfLastMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.endOfTLastMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.endOfTLastMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.earlyThisYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.earlyThisYear}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.endOfThisYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.endOfThisYear}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastThisYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastThisYear}`);
                picker.visible = false;
              });
            },
          },

          {
            text: `@${Terms.date.endOfLastYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.endOfLastYear}`);
                picker.visible = false;
              });
            },
          },
        ],
      },
      pickerRangeOptions: {
        shortcuts: [
          {
            text: `@${Terms.date.today}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.today}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.yesterday}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.yesterday}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.last3day}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.last3day}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.last7day}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.last7day}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisWeek}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisWeek}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastWeek}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastWeek}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisYear}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastYear}`);
                picker.visible = false;
              });
            },
          },
        ],
        shortcuts_date: [
        {
            text: `@${Terms.date.last3day}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.last3day}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.last7day}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.last7day}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisWeek}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisWeek}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastWeek}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastWeek}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastMonth}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastMonth}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.thisYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.thisYear}`);
                picker.visible = false;
              });
            },
          },
          {
            text: `@${Terms.date.lastYear}`,
            onClick(picker) {
              _this.isShortCuts = true;
              _this.$nextTick(() => {
                picker.emit('pick', `@${Terms.date.lastYear}`);
                picker.visible = false;
              });
            },
          },
        ],
      },
      datePickerVisible: false,
      clasicIconShow: false,
      panelWidth: 100,
      Fas_FilterCurrHelper_ID: '',

      HelpEdit: false,

      visibleFilterNameMenu: false,
      visibleSinputMenu: false,
      visibleDownMenu: false,

      InputIsFocused: false,

      clearBtnIsFocused: false,
    };
  },
  watch: {
    Filter: {
      handler(newValue, oldValue) {
        this.filterValue = newValue.Value;
        console.log('--------- filterValue', this.filterValue )
        //更换字段,需要重新创建下拉帮助实例
        if (newValue.Name != oldValue.Name) {
          this.newHelpInstance = false;
        }
      },
      deep: true,
    },
    //筛选条件名称输入发生变化，下拉项根据输入进行过滤
    filterValue(newValue, oldValue) {
        console.log('--------- filterValue2', newValue )
      //非字段比较，更改筛选条件值,字段值比较下拉项选择事件更改
      if (!this.IsFieldRela) {
        this.Filter.Value = newValue;
        if (
          this.ParaContrl != 'help' &&
          this.ParaContrl != 'down' &&
          this.ParaContrl != 'treehelp'
        ) {
          this.Filter.ValueName = newValue;
        }

        //条件值不为空，清空强依赖于该条件的条件项的值
        if (newValue != '' && !!window['Fas_FilterIsDealDepend']) {
          this.$parent.DealDependFilter();
        }
        return;
      }

      //输入无匹配项时，显示全部下拉项
      // if (this.filterFields.filter(item => item.fieldName.indexOf(_.trim(newValue)) != -1).length == 0)
      // {
      //   this.filterFields.forEach(item =>
      //   {
      //     item["isActive"] = true;
      //   });
      //   return;
      // }

      //下拉项根据输入进行过滤
      this.filterFields.forEach(item => {
        //字段对比项不匹配并且非点击自动初始化时
        if (item.fieldName.indexOf(_.trim(newValue)) == -1) {
          item['isActive'] = false;
        } else {
          item['isActive'] = true;
        }
      });
      // console.log('=======this.filterFields=====', this.filterFields, newValue);
    },
    searchText(newValue, oldValue) {
      //下拉项根据输入进行过滤
      this.filterFields.forEach(item => {
        //字段对比项不匹配并且非点击自动初始化时
        if (item.fieldName.indexOf(_.trim(newValue)) == -1) {
          item['isActive'] = false;
        } else {
          item['isActive'] = true;
        }
      });
    },
    //字段改变、关系
    belongFilter: {
      handler(newValue, oldValue) {
        if (this.Mappings[newValue.DataType] == 'number') {
          if (newValue.Condition == 'between' || newValue.Condition == '之间') {
            if (newValue.Value.indexOf('-') == -1) {
              if (!this.FilterIsClassic) {
                this.filterValue = '0 - 0';
              } else {
              }
            }
          }
        } else {
          this.filterValue = newValue.Value;
        }
      },
      deep: true,
    },
    ilterIsClassic(val) {
      // alert('FilterValue', val)
    },

    datePickerVisible(n, o) {
      if (!n && o) {
        const { ParaContrl } = this;
        if (ParaContrl == 'datetimerange' || ParaContrl == 'daterange') {
          this.focusInputDelayed();
        }
      }
    },
  },
  computed: {
    formatDataByLang() {
      if (
        this.filterValue === '' ||
        this.filterValue === null ||
        this.filterValue === undefined
      )
        return '';
      if(Array.isArray(this.filterValue)) {
        return this.filterValue.map(item => {
          return item.label
        }).join(',');
      }
      if (this.filterValue.indexOf && this.filterValue.indexOf('@') != -1)
        return this.filterValue;
      let res = null;
      switch (this.ParaContrl) {
        case 'daterange':
          // console.log(
          //   "=======this.filterValue.split('-')======",
          //   this.filterValue.split('-'),
          // );
          if (
            this.filterValue&&this.filterValue.split&&this.filterValue
              .split(' - ')
              .every(item => this.isTimeStr(item.trim()))
          ) {
            res = this.filterValue
              .split(' - ')
              .map(item => DateTimeFormat_Date.format(new Date(item)))
              .join('-');
          }
          break;
        case 'date':
          res = this.isTimeStr(this.filterValue)
            ? DateTimeFormat_Date.format(new Date(this.filterValue))
            : this.filterValue;
          break;
        case 'datetime':
          res = this.isTimeStr(this.filterValue)
            ? DateTimeFormat_Date_Time.format(new Date(this.filterValue))
            : this.filterValue;
          break;
        case 'datetimerange':
          if (
            this.filterValue&&this.filterValue.split&&this.filterValue
              .split(' - ')
              .every(item => this.isTimeStr(item.trim()))
          ) {
            res = this.filterValue
              .split(' - ')
              .map(item => DateTimeFormat_Date_Time.format(new Date(item)))
              .join('-');
          }

          break;
        case 'number':
          res = isNaN(this.filterValue)
            ? this.filterValue
            : this.numberToString(this.filterValue);
          break;
        default:
          break;
      }

      if (
        this.Mappings[this.Filter.DataType] == 'number' &&
        this.ParaContrl != 'numberrange'
      ) {
        res = isNaN(this.filterValue)
          ? this.filterValue
          : this.numberToString(this.filterValue);
      }
      if (res) {
        return res;
      }
      return this.filterValue;
    },
    isMobile() {
      return window.TFF?.common?.cts?.isMobile();
    },
    quasarDateRange() {
      if(this.pickerRangeValue&&this.pickerRangeValue.indexOf('@') != -1) {
        return this.pickerRangeValue
      }
      
      const [start, end] = this.pickerRangeValue.split(' - ');
      return start && end ? [start,  end ] : null;
    },
    Field() {
      let _this = this;
      let _fields = this.Fields.filter(item => {
        return (
          item.fieldAlias == _.replace(_this.Filter.Code, '.', '_') ||
          item.fieldName == _this.Filter.Name
        );
      });

      if (_fields.length == 0) {
        return {
          filter_inputWay: 'text',
        };
      } else {
        return _fields[0];
      }
    },
    filterFields() {
      return this.fieldList.filter(f => {
        return (
          this.Mappings[f.dataType] == this.Mappings[this.Filter.DataType] &&
          f.fieldName != this.Filter.Name
        );
      });
    },
    activeItemList() {
      return this.filterFields.filter(item => {
        return item.isActive;
      });
    },
    IsReadOnly() {
      return ['down', 'help'].includes(this.Field.filter_inputWay);
    },
    IsFieldRela() {
      return (
        this.Filter.Condition.indexOf('[') != -1 &&
        this.Filter.Condition.indexOf(']') != -1
      );
    },
    ParaContrl() {
      this.newHelpInstance = false;

      if (['isnotblank', 'isblank'].includes(this.Filter.Condition))
        return 'none';

      if (this.IsFieldRela) return 'field';

      if (this.Field.filter_inputWay == 'text') {
        if (
          this.Mappings[this.Filter.DataType] == 'number' &&
          (this.Filter.Condition == '之间' || this.Filter.Condition == 'between')
        ) {
          return 'numberrange';
        }
        if (_.trim(this.Field.filter_dataValue) != '') {
          return 'sinput';
        }
        return 'text';
      }

      if (this.Field.filter_inputWay == 'down') {
        // 启用多选模式
        this.downMultiple = ['in', 'notin', 'i', 'notin'].includes(this.Filter.Condition);
        return 'down';
      }

      if (this.Field.filter_inputWay == 'help') {
        // 启用多选模式
        this.downMultiple = ['in', 'notin', 'i', 'notin'].includes(this.Filter.Condition);
        return 'help';
      }
      if (this.Field.filter_inputWay == 'treehelp') {
        return 'treehelp';
      }
      if (this.Field.filter_inputWay == 'date') {
        if (['=', '<>', '<', '>', '<=', '>='].includes(this.Filter.Condition)) {
          return 'date';
        } else {
          return 'daterange';
        }
      }

      if (this.Field.filter_inputWay == 'time') {
        if (['=', '<>', '<', '>', '<=', '>='].includes(this.Filter.Condition)) {
          return 'datetime';
        } else {
          return 'datetimerange';
        }
      }

      return null;
    },
    SinputList() {
      return this.Field.filter_dataValue.split(',');
    },
    helpFieldActionConfig() {
      let ret = {};
      const { filter_inputWay, filter_dataValue } = this.Field;
      if (
        filter_inputWay == 'help' &&
        filter_dataValue &&
        typeof filter_dataValue == 'string'
      ) {
        try {
          ret = JSON.parse(this.Field.filter_dataValue);
        } catch (e) { }
      }
      return ret;
    },
    scrollHeight() {
      let _height = Math.min(12, this.activeItemList.length) * 33;

      return _height;
    },
    downHeight() {
      let _height = Math.max(1, Math.min(6, this.downList.length)) * 33;

      return _height;
    },

    clearBtnIsShowed() {
      return (
        _.trim(this.Filter.Value) != '' &&
        (this.clasicIconShow || this.InputIsFocused || this.clearBtnIsFocused)
      );
    },
    filterValueInputStyle() {
      let paddingRight = 0;
      if (!!this.FilterIsClassic) {
        paddingRight = 5;
        const { ParaContrl, clearBtnIsShowed } = this;
        if (!new Set(['numberrange', 'number', 'text']).has(ParaContrl)) {
          paddingRight += 20;
        }
        if (clearBtnIsShowed) {
          paddingRight += 20;
        }
      }
      return {
        paddingRight: paddingRight + 'px',
      };
    },
  },
  setup() {
    const { dialog } = useQuasar();

    return {
      notify({ message = '', type = 'info', caption = '' }) {
        Funcs.Notify(caption, message, type);
      },
      dialog,
    };
  },
  created() {
    _this = this;
  },
  mounted() {
    try {
      this.panelWidth = this.$refs.filter_value_panel.offsetWidth;
    } catch (e) { }
  },
  methods: {
    handleDeleteInput(e) {
      const { FilterIsClassic, ParaContrl } = this;
      if (!FilterIsClassic) return;
      if (
        new Set([
          'date',
          'daterange',
          'datetime',
          'datetimerange',
          'down',
          'help',
          'field',
        ]).has(ParaContrl)
      ) {
        this.clearFilterValue();
      }
    },

    focusInput() {
      const $input = this.$refs['filterValueInput'];
      $input?.setSelectionRange(0, 0);
      $input?.setSelectionRange(0, $input.value.length);
      $input?.focus();
    },

    focusInputDelayed() {
      console.log('=========== focusInputDelayed');
      setTimeout(() => {
        this.focusInput();
      }, 100);
    },

    inputChange(e) {
      console.log('---------- inputChange', e);
      if (this.IsFieldRela) {
        let _input = e.target;
        this.filterValue = _input.value;
      }
      if (
        !(
          this.Mappings[this.Filter.DataType] == 'number' &&
          this.ParaContrl != 'numberrange'
        )
      ) {
        if (
          this.ParaContrl == 'date' ||
          this.ParaContrl == 'daterange' ||
          this.ParaContrl == 'datetime' ||
          this.ParaContrl == 'datetimerange'
        ) {
          return;
        }
        return (this.filterValue = e.target.value);
      }
      var inputValue = e.target.value.replace(/。/gi, '.').replace(/，/gi, ',');
      if (inputValue.indexOf('@') != -1) {
        this.filterValue = inputValue;
      }
      if (!/^[0-9,.-]+$/.test(inputValue)) {
        inputValue = inputValue.replace(/[^0-9,.-]/g, '');
      }
      let precision = inputValue.split(decimal);
      if (precision[1] && precision[1].length > self.precision) {
        precision[1] = precision[1].substr(0, self.precision);
        inputValue = precision.join(decimal);
      }
      //最后一位是0继续输入bucheck，在blur统一格式化
      if (
        inputValue.indexOf(decimal) != -1 &&
        inputValue[inputValue.length - 1] == 0
      ) {
        return;
      }
      if (
        inputValue[inputValue.length - 1] == decimal &&
        inputValue.substr(0, inputValue.length - 1).indexOf(decimal) != -1
      ) {
        inputValue = inputValue.substr(0, inputValue.length - 1);
        e.target.value = inputValue;
      }
      if (inputValue.indexOf('-') == 0) {
        if (inputValue.split('-').length > 2) {
          inputValue = '-' + inputValue.replace(/-/gi, '');
        }
      } else {
        inputValue = inputValue.replace(/-/gi, '');
      }
      if (inputValue.indexOf('-') == 0 && inputValue.length == 1) {
        return;
      }
      if (!inputValue) return (this.filterValue = '');
      if (
        inputValue.split(decimal)[1] &&
        Number(inputValue.split(decimal)[1]) == 0
      ) {
        return (e.target.value = inputValue);
      }
      if (inputValue.indexOf(decimal) == 0 && inputValue.length == 1) {
        return (inputValue = '');
      }
      //过滤多位
      if (
        inputValue[inputValue.length - 1] == decimal &&
        inputValue.indexOf(decimal) == inputValue.length - 1
      ) {
      } else {
        let realValue = this.stringToNumber(inputValue);
        //超出15
        if (realValue.toString().length > 15) {
          realValue = realValue.toString().substr(0, 15);
        }
        this.filterValue = realValue;
        inputValue = this.numberToString(realValue)+'';
        e.target.value = inputValue;
      }
    },
    numberToString(
      nmb,
      local = readCookie?.('teld_locale') || 'zh-CN',
      useGrouping = false,
    ) {
      if (nmb === null || nmb === undefined) return nmb+'';
      let decimal = '.';
      let _precision =
        nmb.toString().indexOf(decimal) != -1
          ? nmb.toString().split(decimal)[1].length
          : 0;
      let precision = this.precision;
      if (!this.precision && this.precision != 0) {
        precision = _precision;
      }
      return (function(){
        const formatted = new Intl.NumberFormat(local, {
          maximumFractionDigits: precision,
          minimumFractionDigits: precision,
          useGrouping: useGrouping,
        }).format(nmb);
        try{
          if ((Object.is && Object.is(nmb, -0)) && !/^-/.test(formatted)) {
            return '-' + formatted;
          }
          return formatted;
        }catch(e){
          if ((nmb===0 && (1/nmb)===-Infinity) && !/^-/.test(formatted)){
            return '-' + formatted;
          }
          return formatted;
        }
      })();
    },
    stringToNumber(nmbStr, local = readCookie?.('teld_locale')) {
      if (!nmbStr && nmbStr != '0') return '';

      let reversedVal = nmbStr.replace
        ? nmbStr
          .replace(new RegExp('\\' + group, 'g'), '')
          .replace(new RegExp('\\' + decimal, 'g'), '.')
        : nmbStr;
      return Number(reversedVal);
    },
    filterValueClick(e) {
      if( this.HelpEdit ) return
      var _this = this;
      let _input = e.target;
      this.searchText = '';

      //选取字段
      if (this.IsFieldRela) {
        //输入框值跟筛选字段值相同，显示所有字段
        if (
          _input.value == this.Filter.Value ||
          _input.value == `<${Terms.field.inputValue}>` ||
          _input.value == `<${Terms.field.choiseField}>`
        ) {
          this.filterFields.forEach(item => {
            item['isActive'] = true;
          });
        }

        // //初始化比较字段的值
        // if (_input.value == `<${this.Term.field.inputValue}>` && this.activeItemList.length > 0)
        // {
        //   let _field = this.activeItemList[0];

        //   this.filterValue = _field.fieldName;
        //   this.Filter.Value = _field.fieldName;
        //   this.Filter.ValueName = _field.tableAlias + "." + (_field.tableAlias != "__UserDefineColumns" ? _field.fieldCode : _field.fieldAlias);
        //   this.Filter.ValueType = 1;
        // }

        _input.setSelectionRange(0, 0);
        _input.setSelectionRange(0, _input.value.length);

        //字段下拉激活显示
        clearTimeout(this.timeoutActiveName);
        const _showDown = () => {
          this.visibleFilterNameMenu = true;

          setTimeout(() => this.$refs['fieldSearchInput'].focus(), 100);
        };
        this.timeoutActiveName = setTimeout(_showDown, 200);

        return;
      }
      //依赖项校验
      else {
        if (!this.$parent.CheckDependFilter()) {
          return;
        }
      }

      //纯输入框
      if (this.ParaContrl == 'text') {
        if (
          _input.value.indexOf(this.Term.field.inputValue) != -1 ||
          _input.value.indexOf(this.Term.field.choiseField) != -1
        ) {
          _input.setSelectionRange(0, 0);
          _input.setSelectionRange(0, _input.value.length);
        }
        return;
      }
      //下拉输入框
      if (this.ParaContrl == 'sinput') {
        if (
          _input.value.indexOf(this.Term.field.inputValue) != -1 ||
          _input.value.indexOf(this.Term.field.choiseField) != -1
        ) {
          _input.setSelectionRange(0, 0);
          _input.setSelectionRange(0, _input.value.length);
        }
        // this.$refs['filterSinputDown'].click();
        this.visibleSinputMenu = true;
        return;
      }
      //下拉框
      if (this.ParaContrl == 'down') {
        this.getDownList().then(list => {
          if (Array.isArray(list)) {
            if (list.length == 0) {
              return false;
            }
          } else {
            if (
              _.isNil(list) ||
              _.isNil(list.List) ||
              !Array.isArray(list.List) ||
              list.List.length == 0
            ) {
              return false;
            }

            let _list = [];
            var _dataConfig = null;
            try {
              _dataConfig = JSON.parse(this.Field.filter_dataValue);

              _list = _.map(list.List, item => {
                return {
                  code: item[_dataConfig.valueField],
                  name: item[_dataConfig.labelField],
                };
              });
            } catch (e) {
              this.notify({
                message: e,
                type: 'warning',
              });
            }
            list = _list;
          }

          this.downList = list;
          // this.$refs['filterValueDown'].click();

          this.downValue =Array.isArray(this.Filter.ValueName)?this.Filter.ValueName:(this.Filter.ValueName&&this.Filter.ValueName.split(',')) ;
          // this.$refs['filterValueSelect'].visible = true;

          //字段下拉激活显示
          clearTimeout(this.timeoutActiveName);
          const _showDown = () => {
            this.visibleDownMenu = true;
          };
          this.timeoutActiveName = setTimeout(_showDown, 200);
        });
        return;
      }
      //帮助框
      if (this.ParaContrl == 'help') {
        //重新创建新下拉帮助实例
        this.newHelpInstance = true;
        this.HelpEdit = true;

        //等待实例创建DOM完成
        setTimeout(() => {
          const $helpDiv = this.$refs?.helpDiv;
          if ($helpDiv) {
            const { clientWidth } = $helpDiv;
            this.$refs.downHelper?.openHelper({ divWidth: clientWidth });
          }
        }, 50);

        return;
      }

      if (this.ParaContrl == 'treehelp') {
        //重新创建新下拉帮助实例
        this.newHelpInstance = true;
        this.HelpEdit = true;

        //等待实例创建DOM完成
        setTimeout(() => {
          const $treehelpDiv = this.$refs?.treehelpDiv;
          if ($treehelpDiv) {
            const { clientWidth } = $treehelpDiv;
            this.$refs.treeHelp?.openHelper({ divWidth: clientWidth });
          }
        }, 100);

        return;
      }
      //时间框
      if (this.ParaContrl == 'date') {
        if (this.isTimeStr(this.filterValue)) {
          this.pickerValue = this.filterValue;
        } else {
          if(this.filterValue&&this.filterValue.indexOf('@') != -1) {
            this.pickerValue = this.filterValue;
          }else{
            this.pickerValue = '';
          }
        }

        setTimeout(() => {
          this.$refs.datePicker.handleOpen();
        }, 100);

        this.datePickerVisible = true;
        return;
      }
      //时间区间
      if (this.ParaContrl == 'daterange') {
        let _values = this.filterValue&&this.filterValue.split(' - ')||[];
        let _allIsTime = true;

        _values.forEach(item => {
          if (!this.isTimeStr(item)) {
            _allIsTime = false;
          }
        });
        if (_allIsTime) {
          this.pickerRangeValue = this.filterValue;
        } else {
        
          if(this.filterValue.indexOf('@') != -1) {
            this.pickerRangeValue = this.filterValue;
          }else{
            this.pickerRangeValue = '';
          }
        }

        this.datePickerVisible = true;
        setTimeout(() => {
          this.$refs.datePicker.handleOpen();
        }, 100);
        return;
      }
      //时间框
      if (this.ParaContrl == 'datetime') {
        if (this.isTimeStr(this.filterValue)) {
          //兼容历史数据，日期类型字符串会报错
          if (this.filterValue.indexOf(':') == -1) {
            this.filterValue += ['>', '>=', '='].includes(this.Filter.Condition)
              ? ' 00:00:00'
              : ' 23:59:59';
          }

          this.pickerValue = this.filterValue;
        } else {
       
          if(this.filterValue&&this.filterValue.indexOf('@') != -1) {
            this.pickerValue = this.filterValue;
          }else{
            this.pickerValue = '';
          }
        }

        this.datePickerVisible = true;
        setTimeout(() => {
          this.$refs.dateTimePicker.handleOpen();
        }, 100);
        return;
      }
      //时间区间
      if (this.ParaContrl == 'datetimerange') {
        let _values =  this.filterValue&&this.filterValue.split(' - ')||[];
        let _allIsTime = true;

        let _temp = [];
        _values.forEach((item, index) => {
          if (!this.isTimeStr(item)) {
            _allIsTime = false;
          } else {
            //兼容历史数据，日期类型字符串会报错
            if (item.indexOf(':') == -1) {
              _temp.push(item + (index == 0 ? ' 00:00:00' : ' 23:59:59'));
            } else {
              _temp.push(item);
            }
          }
        });
        if (_allIsTime) {
          this.filterValue = _temp.join(' - ');
          this.pickerRangeValue = this.filterValue;
        } else {
          if(this.filterValue.indexOf('@') != -1) {
            this.pickerRangeValue = this.filterValue;
          }else{
            this.pickerRangeValue = '';
          }
        }

        this.datePickerVisible = true;
        setTimeout(() => {
          this.$refs.dateTimePicker.handleOpen();
        }, 100);
        return;
      }
    },
    //输入框失去焦点
    filterValueBlur(e) {
      // 失焦是不是也要失去焦点呢
      setTimeout(() => {
        this.InputIsFocused = false;
      }, 100);

      //非字段对比，没有需要处理的场景
      if (!this.IsFieldRela) {
        return;
      }

      if (
        this.Filter.Value == `<${Terms.field.choiseField}>` &&
        this.Filter.ValueName == `<${Terms.field.choiseField}>` &&
        this.filterValue == `<${Terms.field.choiseField}>`
      ) {
        this.preFieldName = `<${Terms.field.choiseField}>`;
        return;
      }

      // this.recoverPreFieldRela();
    },
    filterValueChange(e) {
      let _input = e.target;
      if (this.IsFieldRela) {

        console.log('--------- filterValue4', _input.value )
        return (this.filterValue = _input.value);
      }
      if (
        this.Mappings[this.Filter.DataType] == 'number' &&
        !['isblank', 'isnotblank'].includes(this.Filter.Condition)
      ) {
        if (this.Filter.Condition != 'between') {
          let _value = this.stringToNumber(_input.value);
          if (!isNaN(_value)) {
            this.filterValue = _value;
          }
          if (!this.isNumber(_input.value) || isNaN(_value)) {
            // Funcs.Notify(
            //   Terms.Notify.warningTitle,
            //   Terms.Notify.warningText_checkTypeNumber,
            //   'warning',
            // );

            this.notify({
              caption: Terms.Notify.warningTitle,
              type: 'warning',
              message: Terms.Notify.warningText_checkTypeNumber,
            });

            _input.setSelectionRange(0, 0);
            _input.setSelectionRange(0, _input.value.length);
            _input.focus();
          }
        } else {
        }
        return;
      } else if (
        this.Mappings[this.Filter.DataType] == 'datetime' &&
        !['isblank', 'isnotblank'].includes(this.Filter.Condition) &&
        this.filterValue.indexOf('@') == -1
      ) {
        if (this.Filter.Condition != 'between') {
          let _value = new Date(_input.value).format('yyyy/MM/dd HH:mm:sss');
          if (!this.isTimeStr(_input.value)) {
            // Funcs.Notify(
            //   Terms.Notify.warningTitle,
            //   Terms.Notify.warningText_checkTypeNumber,
            //   'warning',
            // );
            this.notify({
              caption: Terms.Notify.warningTitle,
              type: 'warning',
              message: Terms.Notify.warningText_checkTypeNumber,
            });
            _input.setSelectionRange(0, 0);
            _input.setSelectionRange(0, _input.value.length);
            _input.focus();
          } else {
            this.filterValue = _value;
          }
        }
        return;
      }
      this.filterValue = _input.value;
    },
    filterValueKeyDown(e) {
      let whiteList = [8, 13, 9, 37, 39];
      if (whiteList.includes(e.keyCode)) {
        return;
      }
      if (
        this.Mappings[this.Filter.DataType] == 'number' &&
        this.ParaContrl != 'numberrange'
      ) {
        //8 删除 13回车 30,40 上下箭头 9:Tab

        //keycode
        let allowedCharacters = new RegExp('[0-9' + decimal + '-]$');

        // 如果输入的字符不是数字或小数位分隔符，则阻止输入
        const keyCode = e.key;
        if (whiteList.includes(e.keyCode)) {
        } else if (e.key == decimal && e.target.value.indexOf(decimal) == -1) {
        } else if (allowedCharacters.test(keyCode)) {
        } else if (
          (e.keyCode >= 48 && e.keyCode <= 57) ||
          (e.keyCode >= 96 && e.keyCode <= 105)
        ) {
        } else {
          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      } else if (
        this.ParaContrl == 'date' ||
        this.ParaContrl == 'daterange' ||
        this.ParaContrl == 'datetime' ||
        this.ParaContrl == 'datetimerange'
      ) {
        if (
          e.target.value &&
          e.target.value.indexOf &&
          e.target.value.indexOf('@') == -1 &&
          !this.IsFieldRela
        ) {
          e.preventDefault();
          e.stopPropagation();
          return false;
        } else if (
          e.target.value &&
          e.target.value.indexOf &&
          e.target.value.indexOf('@') != -1 &&
          e.keyCode == 13
        ) {
          this.filterValue = e.target.value;
        }
      }
      if (e.keyCode == 13) {
        let parentNode = this.$parent.$parent.$parent.$parent.$parent.$parent;
        if (parentNode.filterQuery) {
          parentNode.filterQuery();
        }
        //if(!!parentNode.FilterIsClassic&&parentNode.filterQuery){
        //  parentNode.filterQuery()
        // }
        //直接查询dom存在重名问题查找父节点处理
        //if( document.querySelector('.filter-oper-apply')){
        //  document.querySelector('.filter-oper-apply').click()
        // }
        //  if(document.querySelector(".filter-button-active")){
        //   document.querySelector(".filter-button-active").click()
        // }
        // if (this.activeItemList.length > 0)
        //{
        //   this.filterNameCommand(this.activeItemList[0]);
        // }
        // this.$refs['filterValueInput'].blur();
        // this.$refs['filterNameDown'].hide();
      } else if ([38, 40].indexOf(e.keyCode) > -1) {
        if (!this.IsFieldRela) {
          return;
        }
        // up/down
        if (
          this.activeItemList.length > 0 &&
          this.activeItemList.filter(item => item.isActive).length > 0
        ) {
          // this.$refs['filterNameDown'].handleItemKeyDown(e);
        }
      }
    },
    filterValueMouseEnter() {
      if(this.datePickerVisible) return
      if (_.trim(this.Filter.Value) != '') {
        this.clasicIconShow = true;
      }
    },
    filterValueMouseLeave() {
      if(this.datePickerVisible) return
      this.clasicIconShow = false;
    },
    clearFilterValue() {
      this.Filter.Value = '';
      this.Filter.ValueName = '';

      this.pickerRangeValue = '';
      this.pickerValue = '';
      this.$refs.filterTreeHelp &&
        this.$refs.filterTreeHelp.$refs.SelectHelperWarp
        ? (this.$refs.filterTreeHelp.$refs.SelectHelperWarp.selectHelperInstance.checkList =
          [])
        : '';
      this.focusInputDelayed();
    },
    searchTextClick(e) {
      //字段下拉激活显示
      clearTimeout(this.timeoutActiveName);
      this.timeoutActiveName = setTimeout(() => {
        // let _down = this.$refs['filterNameDown'];
        // _down.removeTabindex();
        // _down.initDomOperation();
      }, 100);
    },
    //搜索框失去焦点
    searchTextBlur(e) {
      //非字段对比，没有需要处理的场景
      if (!this.IsFieldRela) {
        return;
      }

      // this.recoverPreFieldRela();
    },
    //恢复上一次的字段
    recoverPreFieldRela() {
      //没有选择对应字段时，恢复选择字段
      clearTimeout(this.timeoutBlurValue);
      this.timeoutBlurValue = setTimeout(() => {
        //下拉隐藏时
        if (this.visibleFilterNameMenu == false) {
          //当前输入框内容，不是任何字段的名称，恢复原值
          if (
            this.fieldList.filter(item => {
              return item.fieldName == this.filterValue;
            }).length == 0
          ) {
            if (this.preFieldName.indexOf(Terms.field.inputValue) != -1) {
              this.preFieldName = `<${Terms.field.choiseField}>`;
            }
            //有可能从值切换为字段
            if (this.preFieldName.indexOf(Terms.field.choiseField) == -1) {
              //如果不是字段
              if (
                this.fieldList.filter(item => {
                  return item.fieldName == this.preFieldName;
                }).length == 0
              ) {
                this.preFieldName = `<${Terms.field.choiseField}>`;
              }
            }
            this.filterValue = this.preFieldName;

        console.log('--------- filterValue5', this.filterValue )
            this.Filter.ValueType = 1;
          }
        }
      }, 200);
    },
    pickerValueChange(value) {
      setTimeout(() => {
        this.focusInput();
      }, 100);

      if (!value) {
        this.pickerRangeValue = ''
        this.pickerValue = '';
        this.filterValue = '';
        return;
      }

      if (typeof value == 'string' && value.indexOf('@') != -1) {
        this.pickerValue = '';
        this.filterValue = value;
      } else {
        if (this.ParaContrl == 'date') {
          value = DateTimeFormat_Date.format(value, 'zh-CN');
          this.filterValue = value;
        } else if (this.ParaContrl == 'datetime') {
          value = DateTimeFormat_Date_Time.format(value, 'zh-CN');
          this.filterValue = value;
        } else {
          if (this.ParaContrl == 'datetimerange') {
            value.forEach(item => {
              item = DateTimeFormat_Date_Time.format(item, 'zh-CN');
            });
          } else {
            value.forEach(item => {
              item = DateTimeFormat_Date.format(item, 'zh-CN');
            });
          }

          this.filterValue = value.join(' - ');
        }
      }
    //  if (this.ParaContrl == 'date') {
        this.datePickerVisible = false;
     // }
      _this.isShortCuts = false;
    },
    pickerRangeValueChange(value) {
      setTimeout(() => {
        this.focusInput();
      }, 100);

      if (!value || (typeof value == 'object' && (!value.from || !value.to))) {
        this.pickerRangeValue = '';
        this.filterValue = '';
        return;
      }

      this.datePickerVisible = false;

      if (typeof value == 'string') {
        if (value.indexOf('@') != -1) {
          this.pickerRangeValue = value;
          this.filterValue = value;
          return;
        }
      }

      if (this.ParaContrl == 'datetimerange') {
        value.forEach(item => {
          item = DateTimeFormat_Date.format(item, 'zh-CN');
        });

        value[0] += ' 00:00:00';
        value[1] += ' 23:59:59';

      } else {
        value.forEach(item => {
          item = DateTimeFormat_Date.format(item, 'zh-CN');
        });
      }



      if (valueArr.indexOf('@') != -1) {
        this.pickerRangeValue = '';
        this.filterValue = valueArr;
      } else {
        this.filterValue = valueArr.join(' - ');
      }
    },
    filterDownCommand(field) {
      //处理帮助、下拉key、value不一致
      // this.filterValue = field.name;
      this.Filter.Value = field.name;
      this.Filter.ValueName = field.code;
      // this.isChangeName = true;
      // this.Filter.ValueName = field.name;
    },
    downHelperClick(e) {
      if (e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
    // 下拉帮助选值
    handleDownHelperChange( val) {
      if(this.downMultiple){
        _this.$nextTick(() => {
          if (typeof this.Field.afterLoad == 'function') {
            this.Field.afterLoad();
          }
          let _dataConfig =
            typeof this.Field.filter_dataValue == 'string'
              ? JSON.parse(this.Field.filter_dataValue)
              : this.Field.filter_dataValue;
          _dataConfig = JSON.parse(this.Field.filter_dataValue);
          this.Filter.Value = val.map(item=>item[_dataConfig.labelField]).join(',');
          this.Filter.ValueName = val.map(item=>{
            let res = {
            ...item
            }
            res.value = item[_dataConfig.valueField]
            res.label = item[_dataConfig.labelField]
            return res
          });
        });
        return 
      }
      const { name, code } = val
      if (code != this.Filter.ValueName) {
        // 选择后执行脚本
        _this.$nextTick(() => {
          if (typeof this.Field.afterLoad == 'function') {
            this.Field.afterLoad();
          }
        });
      }
      this.Filter.Value = name;
      this.Filter.ValueName = code;

      _this.$nextTick(() => {
        this.HelpEdit = false;

        setTimeout(() => {
          this.HelpEdit = false;
          // this.focusInput();
        }, 200);
      });
    },
    handleHideHelpPanel() {
      this.HelpEdit = false;

      setTimeout(() => {
        this.focusInput();
      }, 200);
    },
    // 下拉帮助选值
    handleTreeHelperChange(val) {
      let name, code;

      if (Array.isArray(val)) {
        //多选
        this.Filter.multipleList = val;
        name = val.map(v => v.name).join(',');
        code = val.map(v => v.code).join(',');
      } else {
        ({ name, code } = val);
      }

      if (code != this.Filter.ValueName) {
        // 选择后执行脚本
        _this.$nextTick(() => {
          if (typeof this.Field.afterLoad == 'function') {
            this.Field.afterLoad();
          }
        });
      }
      this.Filter.Value = name;
      this.Filter.ValueName = code;

      this.HelpEdit = false;
      setTimeout(() => {
        this.focusInput();
      }, 100);
    },

    handlerClickDownItem(item) {
      if (!this.downMultiple) return this.filterSelectCommand([item.code]);

      const { code } = item;
      let tempValue = new Set(this.downValue || []);
      if (tempValue.has(code)) {
        tempValue.delete(code);
      } else {
        tempValue.add(code);
      }
      this.downValue = [...tempValue];
      return this.filterSelectCommand(this.downValue);
    },

    filterSelectCommand(data) {
      if (!this.downMultiple) this.visibleDownMenu = false;

      let _text = [];
      let _code = [];
      if (!Array.isArray(data)) {
        _code =
          typeof data == 'number' || typeof data == 'boolean'
            ? [data]
            : (data || '').split(',');
      } else {
        data.forEach(item => {
          if (
            _.trim(item) != '' &&
            this.downList.filter(_item => _item.code == item).length > 0
          ) {
            _code.push(item);
          }
        });
      }

      this.downList.forEach(item => {
        if (_code.includes(item.code)) {
          _text.push(item.name);
        }
      });

      // 处理多选值
      this.Filter.Value = _text.join(',');
      this.Filter.ValueName = _code.join(',');
    },

    filterSinputCommand(field) {
      this.filterValue = field;
      this.visibleSinputMenu = false;
    },

    filterNameCommand(field) {
      this.visibleFilterNameMenu = false;
      this.preFieldName = field.fieldName;
      this.filterValue = field.fieldName;
      this.Filter.Value = field.fieldName;
      this.Filter.ValueName =
        field.tableAlias +
        '.' +
        (field.tableAlias != '__UserDefineColumns'
          ? field.fieldCode
          : field.fieldAlias);
      this.Filter.ValueType = 1;
    },
    getDownList() {
      var _this = this;
      var _list = [];

      if (this.Field.filter_dataType == 'fixed') {
        let _item = [];
        this.Field.filter_dataValue.split(',').forEach(item => {
          _item = item.split(':');
          _list.push({
            code: _item[0],
            name: _item[_item.length - 1],
          });
        });

        _list.forEach(item => {
          //国际化词条
          let _text = item.name;

          if (
            !!this.Field.filter_dataValueList_Schema &&
            Array.isArray(this.Field.filter_dataValueList_Schema) &&
            this.Field.filter_dataValueList_Schema.length > 0
          ) {
            let _term =
              this.Field.filter_dataValueList_Schema.filter(
                temp => temp.ShowValue == _text,
              )[0] || {};
            _text = Funcs.GetTerms(_term.ReferenceExpr || '', _text);
          }

          item.name = _text;
        });

        return new Promise(resolve => {
          resolve(_list);
        });
      } else {
        var _dataConfig = null;
        try {
          _dataConfig =
            typeof this.Field.filter_dataValue == 'string'
              ? JSON.parse(this.Field.filter_dataValue)
              : this.Field.filter_dataValue;

          let executeActionParam = {
            ActionType: _dataConfig.ActionType,
            ActionID: _dataConfig.DataSource,
            Parameters: _dataConfig.ServicePara,
            JSScriptES5: '',
          };
          // return TeldFasRTUtils.action.executeAction(executeActionParam);
          return new Promise(async resolve => {
            let result = [];
            if (typeof this.Field.search == 'function') {
              result = await this.Field.search(executeActionParam);
            }
            resolve(result);
          });
          // return TeldFasRTUtils.action.executeAction(executeActionParam);
          // return this.Field.search();
        } catch (e) {
          this.notify({
            message: e,
            type: 'warning',
          });
        }
      }
    },
    isTimeStr(str) {
      let _reg = /^[0-9,/:-\s]+$/;
      if (
        !isNaN(
          Date.parse(
            new Date(str && str.replace ? str.replace(/-/g, '/') : str),
          ),
        ) &&
        isNaN(str) &&
        _reg.test(str)
      ) {
        return true;
      } else {
        return false;
      }
    },
    isNumber(val) {
      if(val===false||val===null||typeof val ==='undefined') return false
      let locale = readCookie?.('teld_locale') || 'zh-CN';
      //千分位
      let group = new Intl.NumberFormat(locale).format(1111).replace(/1/g, '');
      //小数点
      let decimal = new Intl.NumberFormat(locale).format(1.1).replace(/1/g, '');
      val = val&&val.toString();
      let reversedVal = val.replace
        ? val
          .replace(new RegExp('\\' + group, 'g'), '')
          .replace(new RegExp('\\' + decimal, 'g'), '.')
        : val;
      val = Number(reversedVal);
      var RegexTest =
-        /^[0-9]+\d*(\.\d*)?$|^0?\.\d*[1-9]\d*|^0+[1-9]\d*(\.\d*)?$/;
+        /^-?(?:[0-9]+\d*(\.\d*)?|0?\.\d*[1-9]\d*|0+[1-9]\d*(\.\d*)?)$/;
      return RegexTest.test(val);
    },
    stopBubbling(e) {
      try {
        e.stopPropagation();
      } catch (e) {
        window.event.cancelBubble = true;
      }
    },
    // getParaIcon() {
    //   if (this.IsFieldRela) {
    //     return 'el-icon-c-scale-to-original';
    //   }

    //   let icon = 'el-icon-more';
    //   switch (this.ParaContrl) {
    //     case 'down':
    //       icon = 'el-icon-arrow-down';
    //       break;
    //     case 'help':
    //       // icon = "el-icon-more";
    //       icon = 'el-icon-arrow-down';
    //       break;
    //     case 'date':
    //     case 'daterange':
    //     case 'datetime':
    //     case 'datetimerange':
    //       icon = 'el-icon-date';
    //       break;
    //     default:
    //       break;
    //   }

    //   return icon;
    // },
    getParaIconSize() {
      let size = '14px';
      // let icon = 'more_horiz';
      switch (this.ParaContrl) {
        case 'sinput':
        case 'field':
        case 'down':
        case 'help':
        case 'treehelp':
          size = '10px';
          break;
        case 'date':
        case 'daterange':
        case 'datetime':
        case 'datetimerange':
          size = '14px';
          break;
        default:
          break;
      }

      return size;
    },
    getParaIcon() {
      if (this.IsFieldRela) {
        return `${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowDown??'icon-t-arrow-down'}`;
      }

      let icon = '';
      // let icon = 'more_horiz';
      switch (this.ParaContrl) {
        case 'sinput':
        case 'down':
        case 'help':
        case 'treehelp':
          icon = `${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowDown??'icon-t-arrow-down'}`;
          break;
        case 'date':
        case 'daterange':
        case 'datetime':
        case 'datetimerange':
          icon = 'insert_invitation';
          break;
        default:
          break;
      }

      return icon;
    },
    getPlaceholder() {
      let _text = this.Term.placeHolder.letinput;
      switch (this.ParaContrl) {
        case 'down':
        case 'help':
        case 'date':
        case 'daterange':
        case 'datetime':
        case 'treehelp':
        case 'datetimerange':
          _text = this.Term.placeHolder.letselect;
          break;
        default:
          break;
      }

      return _text;
    },
    valueIconClick() {
      const $input = this.$refs['filterValueInput'];
      if ($input) $input.click();
    },
  },
};
</script>

<style lang="scss">
.filter-value-help-panel .select_tree_helper_input .select_tree_helper_result{
  display: none !important;
}
.tr-filter .filter-value-panel .filter-value-clear{
  display: none;
}
.filter-groups-panel .filter-value-help-panel-wrap .select_helper_tag{
  display: none !important;
}
.tr-filter .filter-value-panel:hover .filter-value-clear{
  display: inline-block;
}
.filter-down-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.menu-item-cheked {
  background-color: #f0f2f5;
}

.svg-icon {
  height: 14px;
  vertical-align: middle;
  overflow: hidden;
  fill: currentColor;
}

.el-popper[x-placement^='bottom'] {
  margin-top: 12px !important;
}

.filter-name-item-panel {
  max-height: 400px;
  overflow: auto;
}

.filter-name-text-panel {}

.filter-name-text {
  width: 126px;
  margin: 0 16px;
  height: 27px;
  line-height: 27px;
  border: none;
  outline: none;
}

.filter-name-search-panel {
  position: absolute;
  left: 4px;
  top: 9px;
  color: #bbb;
}

.filter-name-empty-panel {
  height: 27px;
  line-height: 27px;
  color: #888;
}

.filter-name-empty {
  padding-left: 16px;
}

.filter-value-help-panel {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  height: 24px;
  margin: auto 0;
  z-index: 1;
  overflow: hidden;
  // overflow-y: hidden;
  // overflow-x: scroll;

  /* 定制滚动条宽度 */
  // &::-webkit-scrollbar {
  //   width: 0; /* 水平滚动条的高度 */
  //   height: 0; /* 垂直滚动条的宽度 */
  // }

  .q-field__append.q-field__marginal {
    visibility: hidden;
  }
    .select_helper_input{
      .select_helper_tag{
        button{
          display:none !important
        }
      }
      .q-icon.notranslate.material-icons{
    display:none
  }
  }


  .tr-input-default .q-field--dense .q-field__inner .q-field__control {
    border-color: transparent;
  }

  &-wrap {
    position: absolute;
    display: block;
    // min-width: 400px;
    top: -100px !important;
    bottom: -100px;
    left: -2px !important;
    // z-index: 2;
    // top: -4px !important;
    // transform: translateX(100px);
    height: 32px;
    margin: auto 0;
  }
}

// // 下拉帮助样式改造
// .filter-value-help-panel .filter-value-icon {
//   font-size: 12px;
// }

// .filter-value-help-panel .tsh-show-invalid-badge {
//   /* display: none !important; */
// }

// .filter-value-help-panel .tsh-editor-outlined {
//   border: none !important;
//   border-radius: 0px !important;
// }

// .filter-value-help-panel .tsh-dropdownbox:hover {
//   border: none !important;
//   box-shadow: none !important;
// }

// .filter-value-help-panel .tsh-texteditor-buttons-container {
//   display: none !important;
// }

// .filter-value-help-panel-sc .fas-selecthelper {
//   height: auto !important;
//   min-height: auto !important;
//   line-height: normal !important;
// }

// .filter-value-help-panel-sc input {
//   padding: 0px 2px !important;
//   height: 18px !important;
//   line-height: 18px !important;
// }

/**
 * 移动端el-datepicker的时候 date+time 时，时间下拉显示不开，
 * left:0 改 right:0
 */
body.mobile .el-time-panel.el-popper {
  left: unset;
  right: 0;
}
</style>
